﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="XnReader.WinRT.Forms.Bookcase"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XnReader.WinRT.Forms"
    xmlns:common="using:XnReader.WinRT.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controlx="using:XnReader.WinRT.Controlx" xmlns:Helper="using:XnReader.WinRT.Helper" mc:Ignorable="d">

    <Page.Resources>
        <!--
            此页所显示的分组项的集合，绑定到完整
            项列表的子集，因为无法虚拟化组中的项
        -->
        <!--<CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"/>-->
        <CollectionViewSource
            x:Name="cvs"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="Items"/>

        <CollectionViewSource
            x:Name="cvsListView"
            Source="{Binding Groups}"/>
        <CollectionViewSource
            x:Name="cvsBookcases"
            Source="{Binding BookcaseInfo}"/>

        <Helper:BackgroundRandomConverter x:Key="ConverterBackgroundRandom"/>
        <Helper:BookcaseFlagVisibleConverter x:Key="ConverterBookcaseFlagVisible"/>
        <!--<Helper:BookcaseGroupMarginConverter x:Key="ConverterBookcaseGroupMargin"/>-->
        <Helper:CoverConverter x:Key="ConverterCover"/>
        
        <DataTemplate x:Key="ItemTemplateHistoryOnline">
            <Grid HorizontalAlignment="Left" Width="380" Height="60" Margin="0,0,0,-10" Background="#4CFFFFFF">
                <Border HorizontalAlignment="Left" Width="60" BorderBrush="#E5A6A2A2" BorderThickness="0,0,2,0" Margin="0" Padding="0,0,0,10" Background="#7FF0EBEB">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{Binding keywords}" FontSize="22" Foreground="#FF039C32"></TextBlock>
                        <TextBlock Text="{Binding updatetime}" FontSize="12" Foreground="Silver"></TextBlock>
                    </StackPanel>
                </Border>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Border Width="40" Height="40" Background="#FF039C32" >
                            <TextBlock  Text="" FontSize="24" TextAlignment="Center" Foreground="White" FontFamily="Segoe UI Symbol" Margin="0,4,0,0"></TextBlock>
                        </Border>
                    </Border>
                    <Border Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding articlename}" FontSize="18" TextAlignment="Left"></TextBlock>
                            <TextBlock Text="{Binding lastchapter}"  Foreground="Silver" FontSize="12" TextAlignment="Left"></TextBlock>
                        </StackPanel>
                    </Border>
                    <StackPanel Orientation="Horizontal" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <TextBlock Text="{Binding intro}" FontSize="14" Foreground="Green"></TextBlock>
                        <!--<TextBlock Text="%" FontSize="14" Foreground="Green"></TextBlock>-->
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplateHistoryLocal">
            <Grid HorizontalAlignment="Left" Width="380" Height="60" Margin="0,0,0,-10"  Background="#4CFFFFFF">
                <Border HorizontalAlignment="Left" Width="60" BorderBrush="#E5A6A2A2" BorderThickness="0,0,2,0" Margin="0" Padding="0,0,0,10" Background="#7FF0EBEB">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{Binding keywords}" FontSize="22" Foreground="#FF039C32"></TextBlock>
                        <TextBlock Text="{Binding updatetime}" FontSize="12" Foreground="Silver"></TextBlock>
                    </StackPanel>
                </Border>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="60"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Border Width="40" Height="40" Background="#FFB250DB" >
                            <TextBlock  Text="" FontSize="24" TextAlignment="Center" Foreground="White" FontFamily="Segoe UI Symbol" Margin="0,4,0,0"></TextBlock>
                        </Border>
                    </Border>
                    <Border Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding articlename}" FontSize="18" TextAlignment="Left"></TextBlock>
                        </StackPanel>
                    </Border>
                    <StackPanel Orientation="Horizontal" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <TextBlock Text="{Binding intro}" FontSize="14" Foreground="Green"></TextBlock>
                        <!--<TextBlock Text="%" FontSize="14" Foreground="Green"></TextBlock>-->
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplateBookcaseOnline">
            <Border VerticalAlignment="Top" HorizontalAlignment="Left" Width="125" Height="155" Padding="0">
                <Border.Background>
                    <ImageBrush ImageSource="/Assets/imgbg.gif"/>
                </Border.Background>
                <Border Width="120" Height="150" Margin="-5,-5,0,0" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="20"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="2" Source="{Binding articleid, Converter={StaticResource ConverterCover}}"/>
                        <Border Grid.Row="1" Background="#B2000000">
                            <TextBlock Text="{Binding articlename}" TextAlignment="Center" Foreground="White" FontSize="12"></TextBlock>
                        </Border>
                    </Grid>
                </Border>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplateBookcaseLocal">
            <Border VerticalAlignment="Top" HorizontalAlignment="Left" Width="125" Height="155" Padding="0">
                <Border.Background>
                    <ImageBrush ImageSource="/Assets/imgbg.gif"/>
                </Border.Background>
                <Border Width="120" Height="150" Margin="-5,-5,0,0" Background="#FF01B2D3">
                    <Grid VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10"></ColumnDefinition>
                            <ColumnDefinition Width="50"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="50"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <StackPanel>
                            <Border Height="21" BorderBrush="White" BorderThickness="0,0,1,1"></Border>
                            <Border Height="36" BorderBrush="White" BorderThickness="0,0,1,1"></Border>
                            <Border Height="36" BorderBrush="White" BorderThickness="0,0,1,1"></Border>
                            <Border Height="36" BorderBrush="White" BorderThickness="0,0,1,1"></Border>
                            <Border Height="21" BorderBrush="White" BorderThickness="0,0,1,0"></Border>
                        </StackPanel>
                        <Border Grid.Column="1" Height="20" Width="20" Margin="0,115,0,0" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock  Text="" FontSize="14" TextAlignment="Center" Foreground="White" FontFamily="Segoe UI Symbol" Margin="0,4,0,0"></TextBlock>
                        </Border>
                        <Border Grid.Column="3" BorderBrush="White" BorderThickness="2" Height="120" Width="30" VerticalAlignment="Center">
                            <Border VerticalAlignment="Center" Width="20">
                                <TextBlock Text="{Binding articlename}" Foreground="White" FontSize="14" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
                            </Border>
                        </Border>
                    </Grid>
                </Border>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplateBookcaseNav">
            <Border  HorizontalAlignment="Left" Width="250" Height="120" Margin="0,0,-10,-10" Background="{Binding articleid, Converter={StaticResource ConverterBackgroundRandom}}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="80"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
                        <Border Width="40" Height="40">
                            <TextBlock Visibility="{Binding display, Converter={StaticResource ConverterBookcaseFlagVisible}}" Text="" Foreground="White" FontFamily="Segoe UI Symbol" FontSize="22"></TextBlock>
                        </Border>
                    </Border>
                    <Border Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Bottom">
                        <TextBlock FontSize="18"  Margin="20,0,0,10" Text="{Binding articlename}" Foreground="White" TextAlignment="Left"></TextBlock>
                    </Border>
                    <Border Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Bottom">
                        <TextBlock  FontSize="36"  Margin="0,0,20,10" Text="{Binding author}"  Foreground="White" TextAlignment="Right"></TextBlock>
                    </Border>
                </Grid>
            </Border>
        </DataTemplate>
        <Helper:TemplateSelector x:Key="GridViewTemplateSelector"
                                    ItemTemplateHistoryOnline="{StaticResource ItemTemplateHistoryOnline}"
                                    ItemTemplateHistoryLocal="{StaticResource ItemTemplateHistoryLocal}"
                                    ItemTemplateBookcaseOnline="{StaticResource ItemTemplateBookcaseOnline}"
                                    ItemTemplateBookcaseLocal="{StaticResource ItemTemplateBookcaseLocal}"
                                    ItemTemplateBookcaseNav="{StaticResource ItemTemplateBookcaseNav}">
        </Helper:TemplateSelector>
        <DataTemplate x:Key="DataTemplateListView">
            <Grid Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!--<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>-->
                <StackPanel Grid.Column="1" Margin="10,0,0,0">
                    <TextBlock Text="{Binding articlename}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
                    <TextBlock Text="{Binding intro}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <common:LayoutAwarePage.BottomAppBar>
        <AppBar x:Name="footerBar" Height="90" Background="#E5040404">
            <Controlx:CommandDx x:Name="footer"></Controlx:CommandDx>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>

    <!--
        此网格用作定义以下两行的页的根面板:
        * 第 0 行包含后退按钮和页标题
        * 第 1 行包含页布局的其余部分
    -->
    <Grid Background="#FFE6EBD4" >
    <!--<Grid>
        <Grid.Background>
            <ImageBrush ImageSource="/Assets/background_default.png"/>
        </Grid.Background>-->
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 在大多数视图状态中使用的水平滚动网格-->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="2"
            Padding="116,137,40,46"
            ItemsSource="{Binding Source={StaticResource cvs}}"
            ItemTemplateSelector="{StaticResource GridViewTemplateSelector}"
            SelectedItem="{Binding ArticleGroup, Mode=TwoWay}"
            SelectionMode="Multiple"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True" 
            ItemClick="ItemGridViewItemClick">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="0,0,0,-10" />
                    <Setter Property="Padding" Value="0,0,0,10" />
                    <!--<Setter Property="Background" Value="#4CFFFFFF" />-->
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="VerticalContentAlignment" Value="Bottom" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewItem">
                                <Border x:Name="OuterContainer">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                                </Storyboard>
                                            </VisualState>
                                            <!--鼠标按下时GridView中item的效果-->
                                            <VisualState x:Name="PointerOverPressed">
                                                <Storyboard>
                                                    <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 

Storyboard.TargetName="PointerOverBorder"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 

Storyboard.TargetName="SelectionBackground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 

ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <!--选中框的颜色效果，这里我将value改成了Red-->
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <!--选中框右边三角的颜色，这里我将value改成了Red-->
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <!--选中等效果设置，这边是重点，认真看代码，其实你就会发现，下面即是每个Item的组成部分-->
                                    <Grid x:Name="ReorderHintContent" Background="Transparent">
                                        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" 

FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,0,0,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                        <Border x:Name="ContentContainer">
                                            <Grid x:Name="InnerDragContent">
                                                <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" 

VerticalAlignment="Top" Width="40">
                                                    <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 

z" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,0,0,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                                </Border>
                                                <Rectangle x:Name="PointerOverBorder"  IsHitTestVisible="False" Margin="1" Opacity="0"/>
                                                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource 

ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>
                                                <!--选中鼠标离开后GridView的item蒙板的颜色，这里将Fill修改成了Red-->
                                                <Rectangle x:Name="SelectionBackground" Fill="Red" Margin="4" Opacity="0"/>
                                                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding 

BorderThickness}" Background="{TemplateBinding Background}" Margin="5">
                                                    <Grid>
                                                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 

ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding 

HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" 

Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
                                                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource 

ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                                                        <!--GridView的item选中框颜色，这里将stroke修改成了Red-->
                                                        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="Red" 

StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>
                                                        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource 

ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
                                                    </Grid>
                                                </Border>
                                                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" 

Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">
                                                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40" >
                                                        <!--GridView的item选中效果中右边三角型颜色，这里将Fill修改成了Red-->
                                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="Red" Stretch="Fill"/>
                                                        <!--GridView的item选中效果中勾的颜色-->
                                                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z"  

FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                                    </Grid>
                                                </Border>
                                                <TextBlock x:Name="MultiArrangeOverlayText"  FontSize="26.667" FontFamily="{StaticResource 

ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, 

RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>
                                            </Grid>
                                        </Border>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>                        
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,6">
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding GroupTitle}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>-->
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,60,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

        <!-- 垂直滚动列表仅在对齐后使用-->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource cvs}}"
            ItemTemplate="{StaticResource DataTemplateListView}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemListViewItemClick1">
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding GroupTitle}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>-->
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- 后退按钮和页标题-->
        <Grid VerticalAlignment="Center">
            <Border HorizontalAlignment="Left" VerticalAlignment="Center">
                <Image x:Name="imgLogo" Source="../Assets/logo_small.png" Width="250" Height="80" Margin="120,0,0,0"></Image>
            </Border>
            <Border HorizontalAlignment="Right" VerticalAlignment="Center">
                <Controlx:CommandDx x:Name="header"></Controlx:CommandDx>
            </Border>
            <!--<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>-->
            <!--<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>-->
        </Grid>

        <Border x:Name="borderPopBookcases" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="#4C000000" Visibility="Collapsed">
            <Border Background="#FF039C32" Height="380">
                <Border HorizontalAlignment="Center">
                    <Popup x:Name="popBookcases" Width="500">
                        <Grid Margin="20" Width="460" VerticalAlignment="Center">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="30"></RowDefinition>
                                <RowDefinition Height="50"></RowDefinition>
                                <RowDefinition Height="40"></RowDefinition>
                                <RowDefinition Height="50"></RowDefinition>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="tbTips" FontFamily="Microsoft YaHei"   Grid.Row="0" Text="您选择导入的书籍" TextAlignment="Left" FontSize="14" Foreground="White" Margin="0,5,0,0"></TextBlock>
                            <TextBox  x:Name="txtFiles" Height="150" Grid.Row="1" TextAlignment="Left" FontSize="14" FontFamily="Microsoft YaHei" TextWrapping="Wrap"></TextBox>
                            <TextBlock FontFamily="Microsoft YaHei"  Grid.Row="2" Text="请选择您要导入的书架" TextAlignment="Left" FontSize="14" Foreground="White" Margin="0,5,0,0" />
                            <ComboBox x:Name="cmbBookcases" Grid.Row="3" ItemsSource="{Binding Source={StaticResource cvsBookcases}}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <ComboBoxItem  FontFamily="Microsoft YaHei" FontSize="14" Content="{Binding casename}"></ComboBoxItem>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <TextBlock  FontFamily="Microsoft YaHei" Grid.Row="4" Text="点击[确定]后将导入您选择的书架." TextAlignment="Left" FontSize="14" Foreground="White" Margin="0,5,0,0"></TextBlock>
                            <StackPanel Grid.Row="5"  Orientation="Horizontal" HorizontalAlignment="Right">
                                <Button  FontFamily="Microsoft YaHei"  Content="确定" Click="ConfirmpopBookcasesClicked" HorizontalAlignment="Center" />
                                <Button  FontFamily="Microsoft YaHei"  Content="取消" Click="CancelpopBookcasesClicked" HorizontalAlignment="Center" />
                            </StackPanel>
                        </Grid>
                    </Popup>
                </Border>
            </Border>
        </Border>

        <VisualStateManager.VisualStateGroups>

            <!-- 可视状态反映应用程序的视图状态-->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- 整页采用较窄的 100 像素页边距约定(纵向)-->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    对齐后，后退按钮和标题的样式将有所不同，并且在所有其他视图状态中显示的网格将
                    替换为列表表示形式
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imgLogo" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="footerBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="header" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
